<template>
  <div class="d_body">
    <img
      v-for="(item, index) in list"
      :key="index"
      :src="item.status == 1 ? treePath : treeOverPath"
      alt=""
      :style="{ left: item.x + 'px', top: item.y + 'px' }"
      @click="imgClick(item)"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      treePath: require("@/assets/image/tree.png"),
      treeOverPath: require("@/assets/image/tree_over.png"),
      list: [
        { number: "D-YH-050", x: 150, y: 260, status: 1 },
        { number: "D-YH-048", x: 150, y: 270, status: 1 },
        { number: "D-YH-046", x: 150, y: 280, status: 1 },
        { number: "D-YH-044", x: 150, y: 290, status: 1 },
        { number: "D-GB-043", x: 165, y: 310, status: 1 },
        { number: "D-YH-042", x: 155, y: 310, status: 1 },
        { number: "D-GB-041", x: 165, y: 320, status: 1 },
        { number: "D-GH-040", x: 150, y: 320, status: 1 },
        { number: "D-YH-039", x: 150, y: 340, status: 1 },
        { number: "D-GB-035", x: 165, y: 350, status: 1 },
        { number: "D-GB-034", x: 173, y: 355, status: 1 },
        { number: "D-YS-033", x: 180, y: 345, status: 1 },
        { number: "D-BP-032", x: 185, y: 335, status: 1 },
        { number: "D-YY-068", x: 182, y: 320, status: 1 },
        { number: "D-YS-031", x: 210, y: 325, status: 1 },
        { number: "D-YS-017", x: 217, y: 345, status: 1 },
        { number: "D-YS-016", x: 215, y: 354, status: 1 },
        { number: "D-YS-014", x: 206, y: 354, status: 1 },
        { number: "D-YS-013", x: 195, y: 364, status: 1 },
        { number: "D-YS-012", x: 204, y: 364, status: 1 },
        { number: "D-YS-011", x: 213, y: 364, status: 1 },
        { number: "D-YS-010", x: 227, y: 364, status: 1 },
        { number: "D-YS-009", x: 236, y: 364, status: 1 },
        { number: "D-YS-008", x: 245, y: 364, status: 1 },
        { number: "D-YS-007", x: 250, y: 354, status: 1 },
        { number: "D-YS-006", x: 260, y: 346, status: 1 },
        { number: "D-YS-005", x: 260, y: 354, status: 1 },
        { number: "D-YS-004", x: 254, y: 364, status: 1 },
        { number: "D-YS-003", x: 263, y: 364, status: 1 },
        { number: "D-BP-020", x: 238, y: 348, status: 1 },
        { number: "D-BP-022", x: 255, y: 336, status: 1 },
        { number: "D-YL-021", x: 250, y: 345, status: 1 },
        { number: "D-YS-002", x: 270, y: 354, status: 1 },
        { number: "D-YS-001", x: 285, y: 364, status: 1 },
        { number: "D-BP-023", x: 280, y: 348, status: 1 },
        { number: "D-BP-029", x: 288, y: 345, status: 1 },
        { number: "D-SZ-025", x: 310, y: 348, status: 1 },
        { number: "D-SZ-026", x: 310, y: 335, status: 1 },
        // { number: "D-ZW-028", x: 295, y: 325, status: 1 },
        { number: "D-YS-030", x: 266, y: 315, status: 1 },
        { number: "D-SZ-096", x: 310, y: 290, status: 1 },
        { number: "D-SZ-095", x: 310, y: 280, status: 1 },
        { number: "D-SZ-094", x: 310, y: 270, status: 1 },
        { number: "D-YS-093", x: 295, y: 270, status: 1 },
        { number: "D-YS-092", x: 283, y: 270, status: 1 },
        { number: "D-YS-091", x: 270, y: 270, status: 1 },
        { number: "D-GB-090", x: 285, y: 288, status: 1 },
        { number: "D-GB-089", x: 271, y: 280, status: 1 },
        { number: "D-GB-088", x: 270, y: 290, status: 1 },
        { number: "D-YL-086", x: 260, y: 295, status: 1 },
        { number: "D-GB-085", x: 263, y: 278, status: 1 },
        { number: "D-GB-084", x: 254, y: 285, status: 1 },
        { number: "D-BL-080", x: 258, y: 255, status: 1 },
        { number: "D-WJ-079", x: 253, y: 262, status: 1 },
        { number: "D-BL-078", x: 243, y: 255, status: 1 },
        { number: "D-WJ-077", x: 238, y: 262, status: 1 },
        { number: "D-YL-076", x: 240, y: 290, status: 1 },
        { number: "D-YL-070", x: 230, y: 280, status: 1 },
        { number: "D-YL-069", x: 225, y: 290, status: 1 },
        { number: "D-GB-066", x: 235, y: 270, status: 1 },
        { number: "D-WJ-065", x: 225, y: 260, status: 1 },
        { number: "D-GH-064", x: 231, y: 255, status: 1 },
        { number: "D-GH-063", x: 216, y: 255, status: 1 },
        { number: "D-GH-062", x: 201, y: 255, status: 1 },
        { number: "D-BL-061", x: 186, y: 255, status: 1 },
        { number: "D-BL-060", x: 171, y: 255, status: 1 },
        { number: "D-WJ-059", x: 180, y: 260, status: 1 },
        { number: "D-BP-057", x: 201, y: 270, status: 1 },
        { number: "D-SS-056", x: 208, y: 280, status: 1 },
        { number: "D-YL-055", x: 198, y: 280, status: 1 },
        { number: "D-GB-054", x: 190, y: 280, status: 1 },
      ],
      poi: {},
    };
  },
  props: ["documentHeight", "listData"],
  computed: {},
  watch: {
    listData: {
      handler(newV) {
        newV.map((x) => {
          this.list.map((j, i) => {
            if (x.number == j.number) {
              j = { ...j, ...x };
              this.$set(this.list, i, j);
            }
          });
        });
      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const ratio = (this.documentHeight * 4) / 812;
      const xOffset = 10;
      const yOffset = 3;
      this.list.map((item) => {
        item.x = item.x * ratio + xOffset * ratio;
        item.y = item.y * ratio + yOffset * ratio;
      });
    },
    imgClick(item) {
      this.poi = item;
      this.$emit("imgClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.d_body {
  img {
    position: absolute;
    top: 70px;
    width: 20px;
    height: 20px;
  }
}
.detail_body {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  padding: 10px;

  .name {
    left: 18px;
    top: 0px;
    opacity: 1;
    display: flex;
    align-items: center;

    /** 文本1 */
    font-size: 15px;
    font-weight: 500;
    line-height: 17px;
    color: rgba(32, 32, 32, 1);
    .icon {
      display: block;
      width: 5px;
      height: 5px;
      background: rgba(51, 214, 76, 1);
      border-radius: 50%;
      margin-right: 4px;
    }
  }
  .btn_body {
    width: fit-content;
    margin-top: 8px;
    background: rgba(255, 73, 48, 1);
    display: flex;
    padding: 4px;
    border-radius: 5px;
    /** 文本1 */
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
